<template>
<div class="mask" v-show="showDialog">
    <div class="dialog" style="width:1600px;">
        <div class="dialog-header">
            <div class="title pos-left">{{take}} - {{dialogTitle}}</div>
            <ul class="tools pos-right">
                <li class="item">
                    <button class="btn" type="button" @click="closeDialog">
                        <i class="icon icon-close"></i>
                    </button>
                </li>
            </ul>
        </div>
        <div class="dialog-body scroll">
            <ul class="panel">
                <li class="item">
                    <select class="selector" v-model="district">
                        <option value selected>所有区划</option>
                        <option v-for="(item,idx) in districtArray" :key="idx" :value="item">{{item}}</option>
                    </select>
                </li>
                <li class="item">
                    <input type="date" value class="datepicker" v-model="startTime" placeholder="开始时间" :max="timeLimit" />
                </li>
                <li class="item">至</li>
                <li class="item">
                    <input type="date" value class="datepicker" v-model="endTime" placeholder="结束时间" :max="timeLimit" />
                </li>
                <li class="item">
                    <input type="text" class="textbox" v-model="keyword" placeholder="请输入关键字搜索" />
                </li>
                <li class="item">
                    <button class="btn bg-blue" type="button" @click="query()">
                        <span class="text">查询</span>
                    </button>
                </li>
            </ul>
            <div class="row">
                <div class="col col-left">
                    <div class="chart" id="chart-dl-class"></div>
                </div>
                <div class="col col-right">
                    <table class="dtable">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>告警内容</td>
                                <td>所在区划</td>
                                <td>部位类型</td>
                                <td>隐患发生时间</td>
                            </tr>
                        </thead>
                        <tbody v-if="list.length>0">
                            <tr v-for="(item,idx) in list" :key="idx">
                                <td style="width:5%;">{{idx + 1}}</td>
                                <td style="width:45%;">
                                    <div :title="composeAlarmContent(item)">{{composeAlarmContent(item)}}</div>
                                </td>
                                <td style="width:20%;">
                                    <div :title="item.AreaMC">{{item.AreaMC || '暂无'}}</div>
                                </td>
                                <td style="width:15%;">
                                    <div :title="item.KindMC">{{item.KindMC || '暂无'}}</div>
                                </td>
                                <td style="width:15%;">
                                    <div :title="item.AlarmTime">{{item.AlarmTime || '暂无'}}</div>
                                </td>
                            </tr>
                        </tbody>
                        <tbody v-else>
                            <tr>
                                <td colspan="5">暂无信息</td>
                            </tr>
                        </tbody>
                    </table>
                    <x-pager :page="page" :page-size="pageSize" :total="total" :max-page="maxPage" @pagehandler="pageHandler"></x-pager>
                </div>
            </div>

            <x-loading :show="showLoading"></x-loading>
        </div>
    </div>
</div>
</template>

<script>
import Pager from "@/components/Pager";
import Loading from "@/components/Loading";
import axios from "axios";

export default {
    data() {
        return {
            districtArray: [
                "南明区",
                "云岩区",
                "乌当区",
                "花溪区",
                "观山湖区",
                "经开区",
                "白云区",
                "清镇市",
                "息烽县",
                "修文县",
                "开阳县"
            ],
            keyword: "",
            list: [],
            showLoading: false,
            page: 1,
            pageSize: 10,
            total: 10,
            maxPage: 10,
            district: "",
            showDialog: false,
            dialogTitle: "类型隐患地点清单",
            type: this.take,
            startTime: this.dateShift(0),
            endTime: this.dateShift(0),
            timeLimit: this.dateShift(0)
        };
    },
    watch: {
        take(n, o) {}
    },
    components: {
        "x-pager": Pager,
        "x-loading": Loading
    },
    props: {
        take: String,
        show: Boolean
    },
    methods: {
        composeAlarmContent(item) {
            item.MC = item.MC || '未知地点';
            return `${item.MC}的${item.AlarmType}-${item.QTexts}`;
        },
        pageHandler(page) {
            this.page = page;
            let params = {
                district: this.district,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageIndex: this.page,
                dangerType: this.type,
                startTime: this.startTime + " 00:00:00",
                endTime: this.endTime + " 23:59:59"
            };
            this.showLoading = true;
            axios
                .get(this.URLHEAD + "IDevTypeClassify", {
                    params: params
                })
                .then(res => {
                    let data = res.data;
                    this.list = data.Data.data;
                    this.total = data.Data.count;
                    this.renderChart(data);
                    this.showLoading = false;
                });
        },
        query(val) {
            this.type = val ? val : this.type;
            this.showDialog = true;
            this.list = [];
            this.pageHandler(1);
        },
        reset() {
            this.keyword = "";
            this.page = 1;
            this.pageSize = 10;
            this.district = "";
            this.startTime = this.oneMonthAgo();
            this.endTime = this.today();
        },
        closeDialog() {
            this.reset();
            this.showDialog = false;
        },
        renderChart(data) {
            if (this.chartInstance) {
                this.chartInstance.clear();
            }

            this.option = {
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{b}:{c}({d}%)"
                },
                legend: {
                    orient: "horizontal",
                    left: "left",
                    top: "top",
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    },
                    data: data.Data.dd.map(o => {
                        return o.type;
                    })
                },
                color: this.COLORS,
                series: [{
                    name: "告警分类",
                    type: "pie",
                    radius: "75%",
                    center: ["50%", "60%"],
                    data: data.Data.dd.map(o => {
                        return {
                            name: o.type,
                            value: o.value
                        };
                    }),
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            fontSize: 12,
                            formatter: "{b}\n{c}次  ({d}%)",
                            position: "outside"
                        }
                    }
                }]
            };
            let $this = this;
            $this.chartInstance = this.$Crender("chart-dl-class", this.option);
            $this.chartInstance.on('click', e => {
                debugger;
            })
        }
    }
};
</script>

<style scoped>
.row {
    display: flex;
    flex-flow: row nowrap;
}

.col {
    align-items: top;
}

.col-left {
    flex-grow: 0;
    order: 0;
    width: 600px;
}

.col-left .chart {
    width: 100%;
    height: 470px;
}

.col-right {
    flex-grow: 1;
    order: 1;
}
</style>
